.loading-animation {
  --animation-start-color: #fafafa;
  --animation-end-color: #cccccc;
  --hex-width: 16px;
  background-color: inherit;
  box-shadow: inherit;
  text-align: center;
  font-size: 0;
  -webkit-animation: loading-animation-fade-in 1s;
  animation: loading-animation-fade-in 1s;
}

.loading-animation .hex {
  display: inline-block;
  position: relative;
  width: var(--hex-width);
  /* sqrt(3)/2 * width */
  height: calc(0.57735 * var(--hex-width));
  /* Margin between hexes is 1/12 width of the hexes */
  margin: calc(0.216 * var(--hex-width)) calc(var(--hex-width) / 12);
  background-color: var(--animation-start-color);
  vertical-align: middle;
  -webkit-animation: loading-animation-pulse 3.75s infinite;
  animation: loading-animation-pulse 3.75s infinite;
}
.loading-animation .hex::before,
.loading-animation .hex::after {
  content: "";
  display: block;
  position: absolute;
  width: calc(0.7071 * var(--hex-width));
  height: calc(0.7071 * var(--hex-width));
  background-color: inherit;
  transform-origin: 0 0;
  transform: scaleY(0.57735) rotate(-45deg);
  animation: inherit;
}
.loading-animation .hex::before {
  top: 0;
}
.loading-animation .hex::after {
  top: calc(0.57735 * var(--hex-width));
}

.loading-animation .hex:nth-of-type(2n) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.loading-animation .hex:nth-of-type(2n + 1) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.05s;
}
.loading-animation .hex:nth-of-type(2n + 2) {
  -webkit-animation-delay: -1.97s;
  animation-delay: -1.97s;
}
.loading-animation .hex:nth-of-type(2n + 3) {
  -webkit-animation-delay: -1.8s;
  animation-delay: -1.8s;
}
.loading-animation .hex:nth-of-type(2n + 4) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.loading-animation .hex:nth-of-type(2n + 5) {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.loading-animation .hex:nth-of-type(2n + 6) {
  -webkit-animation-delay: -1.8s;
  animation-delay: -1.8s;
}
.loading-animation .hex:nth-of-type(2n + 7) {
  -webkit-animation-delay: -1.7s;
  animation-delay: -1.7s;
}
.loading-animation .hex:nth-of-type(2n + 8) {
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.loading-animation .hex:nth-of-type(2n + 9) {
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s;
}
.loading-animation .hex:nth-of-type(2n + 11) {
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
}
.loading-animation .hex:nth-of-type(2n + 12) {
  -webkit-animation-delay: -1.6s;
  animation-delay: -1.6s;
}
.loading-animation .hex:nth-of-type(2n + 13) {
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s;
}
.loading-animation .hex:nth-of-type(2n + 14) {
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s;
}
.loading-animation .hex:nth-of-type(2n + 15) {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}
.loading-animation .hex:nth-of-type(2n + 16) {
  -webkit-animation-delay: -1.5s;
  animation-delay: -1.5s;
}
.loading-animation .hex:nth-of-type(2n + 17) {
  -webkit-animation-delay: -1.3s;
  animation-delay: -1.3s;
}
.loading-animation .hex:nth-of-type(2n + 18) {
  -webkit-animation-delay: -1.4s;
  animation-delay: -1.4s;
}
.loading-animation .hex:nth-of-type(2n + 19) {
  -webkit-animation-delay: -1.45s;
  animation-delay: -1.45s;
}

.loading-animation .spacer {
  display: inline-block;
  width: calc(var(--hex-width) * 14 / 12);
}

@keyframes loading-animation-pulse {
  0% {
    background-color: var(--animation-start-color);
  }
  50% {
    background-color: var(--animation-end-color);
  }
  100% {
    background-color: var(--animation-start-color);
  }
}

@keyframes loading-animation-fade-in {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
